{extend name="public:layout" /}
{block name='css'}
{/block}
{block name="content"}
    <section class="Hui-article-box">
        <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 直播管理 <span
                class="c-gray en">&gt;</span> 房间列表<a class="btn btn-success radius r"
                                                     style="line-height:1.6em;margin-top:3px"
                                                     href="javascript:location.replace(location.href);" title="刷新"><i
                class="Hui-iconfont">&#xe68f;</i></a></nav>
        <div class="Hui-article">
            <article class="cl pd-20">
                <div class="text-c text-right">
                    <input type="text" class="input-text" style="width:250px" placeholder="输入用户昵称、房间名称" id="key" value="{$key|default=''}">
                    <button type="submit" onclick="onSelect()" class="btn btn-success radius" name=""><i
                            class="Hui-iconfont">&#xe665;</i>
                        搜用户
                    </button>
                </div>
                <div class="mt-20">
                    <table class="table table-border table-bordered table-hover table-bg table-sort">
                        <thead>
                        <tr class="text-c">
                            <th width="80">ID</th>
                            <th width="80">用户名</th>
                            <th width="80">性别</th>
                            <th width="80">直播类型</th>
                            <th width="100">房间名称</th>
                            <th width="90">封面图</th>
                            <th width="">公告</th>
                            <th width="70">状态</th>
                            <!--<th width="100">操作</th>-->
                        </tr>
                        </thead>
                        <tbody>
                        {volist name='data' id='vo'}
                        <tr class="text-c">
                            <td>{$vo.id}</td>
                            <td><u style="cursor:pointer" class="text-primary"
                                   onclick="member_show('{$vo.nickname}','show_user?id={$vo.uid}','10001','360','400')">{$vo.nickname|default='haha'}</u>
                            </td>
                            <td>{$vo.sex|default='未知'}</td>
                            <td>{$vo.category}</td>
                            <td>{$vo.title}</td>
                            <td class="text-l">{$vo.cover}</td>
                            <td>{$vo.notice}</td>
                            <td class="td-status"><span class="label label-{$vo.status == '直播中'?'success':'error'} radius">{$vo.status}</span></td>
                        </tr>
                        {/volist}
                        </tbody>
                    </table>
                </div>
                {$data->render()}
            </article>
        </div>
    </section>
{/block}

{block name='js'}
<script type="text/javascript">
    function onSelect() {
        let key = $("#key").val();
        location.href = '/room/index?key=' + key;
    }

    /*用户-添加*/
    function member_add(title, url, w, h) {
        layer_show(title, url, w, h);
    }

    /*用户-查看*/
    function member_show(title, url, id, w, h) {
        layer_show(title, url, w, h);
    }

    /*用户-停用*/
    function member_stop(obj, id) {
        layer.confirm('确认要停用吗？', function (index) {
            $.ajax1(this, '/room/stop', 'post', {id: id}, function (response) {

            });
            $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="member_start(this,id)" href="javascript:;" title="启用"><i class="Hui-iconfont">&#xe6e1;</i></a>');
            $(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已停用</span>');
            $(obj).remove();
            layer.msg('已停用!', {icon: 5, time: 1000});
        });
    }

    /*用户-启用*/
    function member_start(obj, id) {
        layer.confirm('确认要启用吗？', function (index) {
            $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="member_stop(this,id)" href="javascript:;" title="停用"><i class="Hui-iconfont">&#xe631;</i></a>');
            $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已启用</span>');
            $(obj).remove();
            layer.msg('已启用!', {icon: 6, time: 1000});
        });
    }

    /*用户-编辑*/
    function member_edit(title, url, id, w, h) {
        layer_show(title, url, w, h);
    }

    /*密码-修改*/
    function change_password(title, url, id, w, h) {
        layer_show(title, url, w, h);
    }

    /*用户-删除*/
    function member_del(obj, id) {
        layer.confirm('确认要删除吗？', function (index) {
            $(obj).parents("tr").remove();
            layer.msg('已删除!', {icon: 1, time: 1000});
        });
    }
</script>
{/block}
